<template>
    <div>
      <div><center><h1>员工信息展示</h1></center></div>
      <div><el-button type="primary" round @click="tj">添加员工信息</el-button></div>
      <div>
        <el-table :data="lst" border style="width: 100%">
          <el-table-column fixed prop="username" label="用户名" width="150">
          </el-table-column>
          <el-table-column prop="account" label="账号" width="150">
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="150">
          </el-table-column>
          <el-table-column prop="mail" label="邮箱" width="200">
          </el-table-column>
          <el-table-column prop="department" label="所属部门" width="120">
          </el-table-column>
          <el-table-column prop="rank" label="所属职级" width="120"> </el-table-column>
          <el-table-column prop="role" label="所属角色" width="120">
          </el-table-column>
          <el-table-column prop="posts" label="所属岗位" width="120">
          </el-table-column>
          <el-table-column prop="state" label="员工状态" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="change(scope.row.id)" type="text" size="small"
                >修改</el-button>
              <el-button @click="sc(scope.row.id)" type="text" size="small"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
          <el-drawer
              title="添加员工信息"
              :visible.sync="drawer"
              direction="rtl">
              <span>用户名:<input v-model="obj.username"/></span><br>
              <span>账号:<input v-model="obj.account"/></span><br>
              <span>密码:<input v-model="obj.password"/></span><br>
              <span>手机号:<input v-model="obj.mobile"/></span><br>
              <span>邮箱:<input v-model="obj.mail"/></span><br>
              <span>部门:
                  <el-select v-model="obj.department_id" placeholder="请选择部门">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.department"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span>职级:
                  <el-select v-model="obj.rank_id" placeholder="请选择职级">
                      <el-option
                      v-for="item in lst2"
                      :key="item.id"
                      :label="item.rank"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span>角色:
                <el-select v-model="obj.role_id" placeholder="请选择角色">
                    <el-option
                    v-for="item in lst3"
                    :key="item.id"
                    :label="item.role"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
              <span>岗位:
                  <el-select v-model="obj.posts_id" placeholder="请选择岗位">
                      <el-option
                      v-for="item in lst4"
                      :key="item.id"
                      :label="item.posts"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span>状态:
                  <el-select v-model="obj.state" placeholder="请选择状态">
                      <el-option
                      v-for="item in list1"
                      :key="item.id"
                      :label="item.state"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span><el-button @click="add">确认添加</el-button></span>
          </el-drawer>
      </div>
      <div>
          <el-drawer
              title="修改员工信息"
              :visible.sync="drawer1"
              direction="rtl">
              <span>用户名:<input v-model="obj1.username"/></span><br>
              <span>账号:<input v-model="obj1.account"/></span><br>
              <span>手机号:<input v-model="obj1.mobile"/></span><br>
              <span>邮箱:<input v-model="obj1.mail"/></span><br>
              <span>部门:
                  <el-select v-model="obj1.department_id" placeholder="请选择部门">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.department"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span>职级:
                  <el-select v-model="obj1.rank_id" placeholder="请选择职级">
                      <el-option
                      v-for="item in lst2"
                      :key="item.id"
                      :label="item.rank"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span>角色:
                <el-select v-model="obj1.role_id" placeholder="请选择角色">
                    <el-option
                    v-for="item in lst3"
                    :key="item.id"
                    :label="item.role"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
              <span>岗位:
                  <el-select v-model="obj1.posts_id" placeholder="请选择岗位">
                      <el-option
                      v-for="item in lst4"
                      :key="item.id"
                      :label="item.posts"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span>状态:
                  <el-select v-model="obj1.state" placeholder="请选择状态">
                      <el-option
                      v-for="item in list1"
                      :key="item.id"
                      :label="item.state"
                      :value="item.id">
                      </el-option>
                  </el-select>    
              </span><br>
              <span><el-button @click="realchange(obj1.id)">确认修改</el-button></span>
          </el-drawer>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        lst: [],
        lst1:[],
        lst2:[],
        lst3:[],
        lst4:[],
        drawer:false,
        drawer1:false,
        obj:{
          username:'',
          account:'',
          password:'',
          mobile:'',
          mail:'',
          department_id:'',
          role_id:'',
          rank_id:'',
          posts_id:'',
          state:'',
        },
        obj1:{
          id:'',
          username:'',
          account:'',
          password:'',
          mobile:'',
          mail:'',
          department_id:'',
          role_id:'',
          rank_id:'',
          posts_id:'',
          state:'',
        },
        list1:[
          {"id":"1","state":"在职"},
          {"id":"2","state":"出差"},
          {"id":"3","state":"请假"}
      ],
      };
    },
    props: {},
  
    components: {},
  
    created() {},
  
    mounted() {
      this.Users();
      this.Department();
      this.Rank();
      this.Role();
      this.Posts();
    },
  
    beforeDestroy() {},
  
    methods: {
      //用户
      Users() {
        this.$axios.get("users/api/v1/usermanager/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.lst = resp.data.user_all;
          }
        });
      },
      //部门
      Department(){
          this.$axios.get("users/api/v1/depart/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.lst1 = resp.data.departments;
          }
        });
      },
      //职级
      Rank(){
          this.$axios.get("users/api/v1/rank/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.lst2 = resp.data.rank;
          }
        });
      },
      //角色
      Role(){
          this.$axios.get("users/api/v1/roles/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.lst3 = resp.data.role;
          }
        });
      },
      //岗位
      Posts(){
          this.$axios.get("users/api/v1/posts/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.lst4 = resp.data.posts;
          }
        });
      },
      handleClick(id){
          alert(id)
      },
      tj(){
          this.drawer = true
      },
      add(){
          this.$axios.post("users/api/v1/usermanager/",this.obj).then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            alert(resp.data.msg)
            this.Users()
            this.drawer = false
          }else{
              alert(resp.data.msg)
          }
        });
      },
      change(id){
          this.drawer1 = true
          this.$axios.get("users/api/v1/usermanager/"+id+"/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
              this.obj1 = resp.data.data
          }
        });
      },
      realchange(id){
          this.$axios.put("/users/api/v1/usermanager/"+id+"/",this.obj1).then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
              alert(resp.data.msg)
              this.drawer1 = false
              this.Users()
          }else{
              alert(resp.data.msg)
          }
        });
      },
      sc(id){
          this.$axios.delete("/users/api/v1/user_info/"+id+"/").then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
              alert(resp.data.msg)
              this.Users()
          }
        });
      }
    },
  
    computed: {},
  
    watch: {},
  
    directives: {},
  
    filters: {},
  };
  </script>
  
<style scoped>

</style>
  